<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>多功能相册之拼图布局</title>
  <link rel="stylesheet" href="../styles/spinner.css">
  <link rel="stylesheet" href="../styles/gallery-wall.css">
</head>
<body>
<div class="gallery" id="gallery-1"></div>
<div class="gallery" id="gallery-2"></div>
<div class="gallery" id="gallery-3"></div>
<div class="gallery" id="gallery-4"></div>
<div class="gallery" id="gallery-5"></div>
<div class="gallery" id="gallery-6"></div>
<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>
<script src="../scripts/promise.js"></script>
<script src="../scripts/utils.js"></script>
<script src="../scripts/gallery-wall.js"></script>
<script>
  getPhotos(0, '').then(function (photos) {
    document.querySelector('.spinner').style.display = 'none'
    new GalleryWall('#gallery-1', photos.slice(0, 1))
    new GalleryWall('#gallery-2', photos.slice(1, 3))
    new GalleryWall('#gallery-3', photos.slice(3, 6))
    new GalleryWall('#gallery-4', photos.slice(6, 10))
    new GalleryWall('#gallery-5', photos.slice(10, 15))
    new GalleryWall('#gallery-6', photos.slice(15, 21))
  })
</script>
</body>
</html>
